<template>
  <el-dialog v-model="open" :title="route.meta.title" @open="initOpen" @close="close" destroy-on-close>
    <el-space direction="vertical" style="margin: 10px 0;">
      <el-card shadow="never" v-if="!diffType.includes(type)">
        <h3 style="margin: 0 0 10px;">生命线工程基础数据</h3>
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
          <el-form-item label="版本号" prop="versionCode">
            <el-input v-model="queryParams.versionCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="createUserName">
            <el-input v-model="queryParams.createUserName" clearable></el-input>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-table :data="tableList" v-loading="loading" @row-click="rowClick" stripe>
          <el-table-column label="选择" width="55" align="center">
            <template #default="{ row }">
              <el-radio-group v-model="selectedId">
                <el-radio :label="row.id">{{ '' }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="省" prop="province" align="center" />
          <el-table-column label="市" prop="city" align="center" />
          <el-table-column label="区县" prop="county" align="center" />
          <el-table-column label="数据版本号" prop="versionCode" align="center" />
          <el-table-column label="文件名称" prop="fileName" align="center" />
          <el-table-column label="创建人" prop="createUserName" align="center" />
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
          @pagination="getList" />
      </el-card>
      <!-- 供电系统-变电站 -->
      <template v-if="type == diffType[0]">
        <el-card shadow="never">
          <h3 style="margin: 0 0 10px;">变电站数据</h3>
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="60px">
            <el-form-item label="版本号" prop="versionCode">
              <el-input v-model="queryParams.versionCode" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="queryParams.createUserName" clearable></el-input>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button plain @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-table :data="tableList" v-loading="loading" @row-click="rowClick" stripe>
            <el-table-column label="选择" width="55" align="center">
              <template #default="{ row }">
                <el-radio-group v-model="selectedId">
                  <el-radio :label="row.id">{{ '' }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="省" prop="province" align="center" />
            <el-table-column label="市" prop="city" align="center" />
            <el-table-column label="区县" prop="county" align="center" />
            <el-table-column label="数据版本号" prop="versionCode" align="center" />
            <el-table-column label="文件名称" prop="fileName" align="center" />
            <el-table-column label="创建人" prop="createUserName" align="center" />
          </el-table>
          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
        </el-card>
        <el-card shadow="never">
          <h3 style="margin: 0 0 10px;">变电站供电范围矢量数据</h3>
          <el-table :data="tableList1" v-loading="loading1" @row-click="rowClick1" stripe>
            <el-table-column label="选择" width="55" align="center">
              <template #default="{ row }">
                <el-radio-group v-model="selectedId1">
                  <el-radio :label="row.id">{{ '' }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="省" prop="province" align="center" />
            <el-table-column label="市" prop="city" align="center" />
            <el-table-column label="区县" prop="county" align="center" />
            <el-table-column label="数据版本号" prop="versionCode" align="center" />
            <el-table-column label="文件名称" prop="fileName" align="center" />
            <el-table-column label="创建人" prop="createUserName" align="center" />
          </el-table>
          <pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams1.page"
            v-model:limit="queryParams1.rows" @pagination="getList1" />
        </el-card>
      </template>
      <!-- 通信系统-基站 -->
      <template v-if="type == diffType[1]">
        <el-card shadow="never">
          <h3 style="margin: 0 0 10px;">基站数据</h3>
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="60px">
            <el-form-item label="版本号" prop="versionCode">
              <el-input v-model="queryParams.versionCode" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="queryParams.createUserName" clearable></el-input>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button plain @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-table :data="tableList" v-loading="loading" @row-click="rowClick" stripe>
            <el-table-column label="选择" width="55" align="center">
              <template #default="{ row }">
                <el-radio-group v-model="selectedId">
                  <el-radio :label="row.id">{{ '' }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="省" prop="province" align="center" />
            <el-table-column label="市" prop="city" align="center" />
            <el-table-column label="区县" prop="county" align="center" />
            <el-table-column label="数据版本号" prop="versionCode" align="center" />
            <el-table-column label="文件名称" prop="fileName" align="center" />
            <el-table-column label="创建人" prop="createUserName" align="center" />
          </el-table>
          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
        </el-card>
        <el-card shadow="never">
          <h3 style="margin: 0 0 10px;">基站通信范围矢量数据</h3>
          <!-- <el-form :model="queryParams1" ref="queryRef1" :inline="true" label-width="60px">
            <el-form-item label="版本号" prop="versionCode">
              <el-input v-model="queryParams1.versionCode" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="queryParams1.createUserName" clearable></el-input>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQuery1">查询</el-button>
              <el-button plain @click="resetQuery1">重置</el-button>
            </el-form-item>
          </el-form>
          <el-divider></el-divider> -->
          <el-table :data="tableList1" v-loading="loading1" @row-click="rowClick1" stripe>
            <el-table-column label="选择" width="55" align="center">
              <template #default="{ row }">
                <el-radio-group v-model="selectedId1">
                  <el-radio :label="row.id">{{ '' }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="省" prop="province" align="center" />
            <el-table-column label="市" prop="city" align="center" />
            <el-table-column label="区县" prop="county" align="center" />
            <el-table-column label="数据版本号" prop="versionCode" align="center" />
            <el-table-column label="文件名称" prop="fileName" align="center" />
            <el-table-column label="创建人" prop="createUserName" align="center" />
          </el-table>
          <pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams1.page"
            v-model:limit="queryParams1.rows" @pagination="getList1" />
        </el-card>
      </template>
      <!-- 易损性数据 -->
      <!-- count为生命线工程基础数据当前选择的数据是否计算， 0则需要选择易损性，1、2都不需要选择 -->
      <el-card shadow="never" v-show="[0, 1].includes(count) && [0, 1].includes(vulnerability)">
        <h3 style="margin: 0 0 10px;">易损性数据</h3>
        <el-radio-group v-model="vulnerability" v-show="count == 0 && [0, 1].includes(vulnerability)">
          <el-radio :label="0">国家级教据</el-radio>
          <el-radio :label="1">省级数据</el-radio>
        </el-radio-group>
        <span v-show="count == 1">版本中有未计算的数据</span>
      </el-card>
    </el-space>
    <template #footer>
      <el-button type="primary" @click="confirm" auto-insert-space>确定</el-button>
      <el-button plain @click="close" auto-insert-space>取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getDataSource, getVectorDataSource } from '@/api/lifelineProject/index.js'
import { diffType } from '@/views/lifelineProject/index.js'

const props = defineProps({
  open: Boolean,
  selected: String,
  url: String,
  type: Number,
  rang: [Number, String]
})
const emits = defineEmits(['update:open', 'getVersionCode'])
const route = useRoute()
const { proxy } = getCurrentInstance()

const queryParams = ref({
  page: 1,
  rows: 5
})
const total = ref(0)
const tableList = ref([])
const loading = ref(false)
const selectedId = ref('')
const getList = () => {
  loading.value = true;
  getDataSource({ ...queryParams.value, type: props.type }).then(res => {
    if (res.code == 200) {
      tableList.value = res.data?.rows || []
      total.value = res.data?.total || 0
      loading.value = false
      count.value = tableList.value.find(item => item.id == props.selected)?.count

      if (diffType.includes(props.type) && props.selected) {
        // let versionCode = tableList.value.find(item => item.id == props.selected)?.versionCode
        let versionId = tableList.value.find(item => item.id == props.selected)?.id
        getVectorDataSource({ versionId, type: props.type }).then(res => {
          if(res.data){
            tableList1.value = [res.data]
            selectedId1.value = res.data.id
          }
        })
      }

    } else {
      loading.value = false
    }
  }).catch(() => { loading.value = false })
}
const count = ref('2')
const rowClick = (row, _, event) => {
  if (event.target.tagName == 'INPUT') return
  selectedId.value = row.id
  count.value = row.count
  if (diffType.includes(props.type)) {
    getVectorDataSource({ versionId: row.id, type: props.type }).then(res => {
      if(res.data){
        tableList1.value = [res.data]
      }
    })
  }
  vulnerability.value = props.rang || 0
}
const handleQuery = () => {
  queryParams.value.page = 1;
  getList()
}
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery()
}

// 变电站供电范围矢量数据、基站通信范围矢量数据
const queryParams1 = ref({
  page: 1,
  rows: 5
})
const total1 = ref(0)
const tableList1 = ref([])
const loading1 = ref(false)
const selectedId1 = ref('')
const getList1 = () => {

}
const rowClick1 = (row, _, event) => {
  if (event.target.tagName == 'INPUT') return
  selectedId1.value = row.id
}

// 易损性数据
const vulnerability = ref(0)

const initOpen = () => {
  getList()
  // 破坏等级分析回显
  selectedId.value = props.selected
  vulnerability.value = props.rang
}
const close = () => {
  queryParams.value.page = 1;
  proxy.resetForm("queryRef");
  emits('update:open', false)
  count.value = '2'
}
const confirm = () => {
  let selectedData = selectedId.value
  let vulnerabilityValue = count.value == '0' ? vulnerability.value : ''
  let code = ''
  if(tableList.value){
    code = tableList.value.find(item=>item.id==selectedData).versionCode
  }else{
    code = tableList1.value.find(item=>item.id==selectedData).versionCode
  }
  emits('getVersionCode', selectedData, vulnerabilityValue, code)
  close()
}
</script>
